import Link from "next/link";

function BlogsList({blog}: {blog: {id: number; title: string; createdAt: string; tags: string[]}}) {
    return (
        <Link
            href={`/blogDetail?id=${blog.id}`}
            key={blog.id}
            className="block rounded-lg border p-4 shadow-sm hover:shadow-md transition-shadow bg-white dark:bg-zinc-900 cursor-pointer"
        >
            <div className="flex items-center justify-between mb-2">
              <h2 className="text-lg font-semibold">{blog.title}</h2>
              <span className="text-xs text-zinc-500">
                {new Date(blog.createdAt).toLocaleDateString()}
              </span>
            </div>
            <div className="flex flex-wrap gap-2">
              {blog.tags.map((tag: string, idx: number) => (
                <span
                  key={idx}
                  className="inline-block bg-zinc-100 dark:bg-zinc-800 text-xs text-zinc-600 dark:text-zinc-300 px-2 py-0.5 rounded"
                >
                  {tag}
                </span>
              ))}
            </div>
        </Link>
    );
}

export default BlogsList;